<template>
<div class="about">
    <dev class="goBack" @click="goBack">返回</dev>
    <div>
        <swiper
            :modules="modules"
            :loop="true"
            :space-between="50"
            :autoplay="{ delay: 1000, disableOnInteraction: false }"
            :pagination="{ clickable: false }"
            class="swiperBox"
        >
            <swiper-slide v-for="(item, index) in imgList" :key="index">
                <div class="swiper-item" :style="{ background: `url(${item}) no-repeat`, backgroundSize: 'cover' }" v-if="item.includes('.jpg') || item.includes('.png') || item.includes('.gif') || item.includes('.jpeg')">
                    <!-- <img class="bannerimg" Fullscreen Image model="lazy" :src="item" alt="" lazy-load /> -->
                </div>
                <div class="swiper-item" v-else>
                    <video ref="videoPlayer" class="video-js vjs-default-skin video" controls preload="auto" 
                    :poster="`${item}?vframe/jpg/offset/0`">
                        <!-- 可以在这里插入source标签以指定你的视频源 -->
                        <source :src="item" type="video/mp4">
                    </video>
                </div>
            </swiper-slide>
        </swiper>
    </div>
    <div class="content">
        <p class="ellipsis">
            {{detail.article_title}}
        </p>
        <p class="c-cont">
            {{detail.article_aontent}}
        </p>
        <span class="c-time">{{ detail.addtimes ? detail.addtimes.split(' ')[0] : detail.addtimes }}</span>
    </div>
    <div class="comment">
        <div class="c-title">评论</div>
        <div class="flex mt-10">
            <img class="avatar" lazy-load :src="detail.avatarUrl || `${imgUrl}/image/mine/default-user.png`" mode="aspectFill" style="width: 30px;height: 30px;border-radius: 50%;"></img>
            <div class="com-box flex-1">
                <input type="text" placeholder='爱评论的人运气都不会太差～～' class="flex-1 commTxt" v-model.trim="commentText" />
            </div>
            <div class="commentBtn" @click="comment('top')">评论</div>
        </div>
        <div v-if="detail.comment_list && detail.comment_list.length > 0">
            <div class="flex mt-10" v-for="(item, index) in detail.comment_list" :key="index">
                <img lazy-load :src="item.avatarUrl || `${imgUrl}/image/mine/default-user.png`" mode="aspectFill" style="width: 30px;height: 30px;border-radius: 50%;"></img>
                <div class="ml-10 flex-1">
                    <div class="nickname">{{ item.nickName || '微信用户' }}</div>
                    <div class="com-txt">
                        <span class="com-cont">{{ item.comment_content }}</span>
                        <span class="com-time">{{ item.addtimes.split(' ')[0] }}</span>
                        <span class="com-ans" @click="openPopup(item)">回复</span>
                        <!-- <span v-if="userInfo.id == item.user_id" class="com-ans" @click="deleComment(item)">删除</span> -->
                    </div>
                    <div v-if="item.floor && item.floor.length > 0" v-for="(floor, ind) in item.floor" :key="ind">
                        <div class="flex mt-10">
                            <img lazy-load :src="floor.avatarUrl || `${imgUrl}/image/mine/default-user.png`" mode="aspectFill" style="width: 24px;height: 24px;border-radius: 50%;"></img>
                            <div class="ml-10 flex-1">
                                <div class="nickname">{{ floor.nickName || '微信用户' }}</div>
                                <div class="com-txt">
                                    <span class="com-cont">{{ floor.comment_content }}</span>
                                    <span class="com-time">{{ floor.addtimes.split(' ')[0] }}</span>
                                    <!-- <span v-if="userInfo.id == floor.user_id" class="com-ans" @click="deleComment(floor)">删除</span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="detail-footer flex">
        <div class="flex-y-center ml-10" @click="collectChange('ticket')">
            <i v-if="!zanState" class="iconfont icon-heart"></i>
            <i v-if="zanState" class="iconfont icon-heart-fill"></i>
            <div class="f-title">{{ detail.ticket }}</div>
        </div>
        <div class="flex-y-center ml-10" @click="collectChange('star')">
            <i v-if="!floorState" class="iconfont icon-star"></i>
            <i v-if="floorState" class="iconfont icon-star-fill"></i>
            <div class="f-title">{{ detail.collect }}</div>
        </div>
        <div class="flex-y-center ml-10">
            <img lazy-load mode="aspectFill" style="width: 22px;height: 22px;" src="../assets/comment.png" class="ml-lg"></img>
            <div class="f-title">{{ detail.comment }}</div>
        </div>
    </div>
    <div class="popup" v-show="popupShow">
        <div class="opa" @click="popupShow = false"></div>
        <div class="popup-box">
            <div class="com-box flex">
                <input type="text" autofocus placeholder='爱评论的人运气都不会太差～～' class="flex-1 commTxt" v-model.trim="commentLevelText"></input>
                <div class="commentBtn" @click="comment('level')">评论</div>
            </div>
        </div>
    </div>
</div>
</template>
<script lang="ts" setup>
    import { onMounted, ref } from 'vue'
    import { useRoute } from 'vue-router';
    import { getNoteDetail, commentNote, collectNote } from '../api/api'
    import { Swiper, SwiperSlide } from 'swiper/vue'
    import { Navigation, Pagination } from 'swiper/modules'
    import { ElMessage } from 'element-plus'
    import 'element-plus/dist/index.css'
    import 'swiper/css';
    import 'swiper/css/pagination'
    import 'video.js/dist/video-js.css';

    const route = useRoute();
    const note_id = ref(route.params.noteId as string);
    const userInfoId = ref(route.params.userInfoId as string);
    const imgUrl = 'https://wofo.shuchen.fun/static/scnc';

    // 在modules加入要使用的模块
    const modules = [Navigation, Pagination]

    // const userInfo = ref({});
    const detail = ref({});
    const imgList = ref<string[]>([]);
    const zanState = ref(false);
    const floorState = ref(false);
    const popupShow = ref(false);//二级评论弹框
    const commentText = ref('');//评论内容
    const commentLevelText = ref('');//二级评论内容
    const levelMsg = ref({
        id:'',
        user_id:''
    });//二级评论笔记内容

    onMounted( () => {
        getDetail();
    })

    // 返回
    function goBack(){
        window.history.back();
    }

  async function getDetail() {
    const params = {
      note_id: note_id.value,
      user_id: userInfoId.value,
    }
    try {
        const res: any = await getNoteDetail(params);
        detail.value = res;
        
        zanState.value = res.zan_state == 1 ? true : false;
        floorState.value = res.floor_state == 1 ? true : false;
        if(res && res.article_images){
            imgList.value = res.article_images.split(',');
        }
    } catch (error) {
        console.log(error);
    }
  }
    // 打开二级评论弹框
    function openPopup(item: any) {
        popupShow.value = true;
        levelMsg.value = item;
    }
    //   发布评论
    async function comment(type:string) {
        
        if(type == 'top' && !commentText.value){
            ElMessage({
                message: '请输入评论内容',
                type: 'error',
                offset: 300
            })
            return;
        }
        if(type == 'level' && !commentLevelText.value){
            ElMessage({
                message: '请输入评论内容',
                type: 'error',
                offset: 300
            })
            return;
        }
        let commentCoverId:any = 0;
        let commentUserId:any = 0;
        const infos: any = detail.value;
        if(type == 'top'){
            if(infos.comment_list && infos.comment_list.length > 0){
                commentCoverId = infos.comment_list[0].comment_cover_id;
                commentUserId = infos.comment_list[0]!.comment_user_id;
            }
        }
        if(type == 'level'){
            if(infos.comment_list && infos.comment_list.length > 0){
                commentCoverId = levelMsg.value.id;
                commentUserId = levelMsg.value.user_id;
            }
        }
        const params = {
            uniacid: '1',
            note_id: note_id.value,
            user_id: userInfoId.value,
            comment_content: type == 'top' ? commentText.value : commentLevelText.value,
            comment_cover_id: commentCoverId,
            comment_user_id: commentUserId,
            comment_id: type == 'level' ? levelMsg.value.id : ''
        }
        try{
            await commentNote(params);
            await getDetail();
            commentText.value = '';
            commentLevelText.value = '';
            if(type == 'level'){
                popupShow.value = false;
            }
        } catch(err){
            console.log(err)
        }
    }

    // 点赞/收藏
    async function collectChange(str:string){
        let type = null; //1点赞，2收藏
        let selected = null;
        if(str == 'ticket'){
            zanState.value = !zanState.value;
            selected = zanState.value ? '1' : '2';
            type = '1';
        } else {
            floorState.value = !floorState.value;
            selected = floorState.value ? '1' : '2';
            type = '2';
        }
        try{
            await collectNote({
                uniacid: '1',
                note_id: note_id.value,
                user_id: userInfoId.value,
                type,
                selected_state: selected
            });
            await getDetail();
        } catch(err){
            console.log(err)
        }
    }
</script>
<style lang="less" scoped>
.goBack{
    position: fixed;
    z-index: 1000;
    left: 10px;
    top: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.popup{
    position: fixed;
    bottom: -150px;
    width: 100%;
    height: 100vh;
    z-index: 100;
    top: 0;
    left: 0;
    .opa{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
    }
    .popup-box{
        background-color: #fff;
        border-radius: 20px 20px 0 0;
        padding: 20px 14px;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    .com-box{
        margin-left: 0;
        background-color: rgba(0,0,0,0.1);
        border-radius: 30px;
    }
    .commTxt{
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
        font-size: 14px;
        width: 100%;
        outline: none;
        border: none;
        background-color: transparent;
        margin-top: 1px;
    }
    .commentBtn{
        background: linear-gradient(to right, rgba(255,147,79,1), rgba(255,97,0,1));
        height: 28px;
        border-radius: 30px;
        margin-left: 10px;
        line-height: 28px;
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: bold;
    }
}
.flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.mt-10{
    margin-top: 10px;
}
.ml-10{
    margin-left: 10px;
}
.about {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    background-color: #fff;
    .swiper-item{
        width: 100%;
        height: 360px;
    }
    .bannerimg{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .content{
        background-color: #fff;
        padding: 10px 15px;
        .ellipsis{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #1c1d1e;
            font-size: 16px;
        }
        .c-cont{
            color: #666;
            font-size: 14px;
        }
        .c-time{
            margin-top: 10px;
            color: #909399;
            font-size: 12px;
        }
    }
    .comment{
        border-top: 4px solid #e4e7ed;
        padding-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
        background: #fff;
        .c-title{
            color: #1c1d1e;
            font-size: 18px;
        }
        .avatar{
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
        .com-box{
            margin-left: 10px;
            background-color: rgba(0,0,0,0.1);
            border-radius: 30px;
        }
        .commTxt{
            height: 28px;
            line-height: 28px;
            padding-left: 10px;
            font-size: 14px;
            width: 100%;
            outline: none;
            border: none;
            background-color: transparent;
            margin-top: 1px;
        }
        .commentBtn{
            background: linear-gradient(to right, rgba(255,147,79,1), rgba(255,97,0,1));
            height: 28px;
            border-radius: 30px;
            margin-left: 10px;
            line-height: 28px;
            color: #fff;
            padding-left: 20px;
            padding-right: 20px;
            font-weight: bold;
        }
        .nickname{
            color: #909399;
            font-size: 14px;
        }
        .com-cont{
            color: #1c1d1e;
            font-size: 14px;
        }
        .com-time{
            color: #909399;
            margin-left: 8px;
            font-size: 12px;
        }
        .com-ans{
            margin-left: 8px;
            color: #909399;
            font-size: 12px;
        }
    }
    .detail-footer{
        padding-right: 20px;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 54px;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100%;
        border-top: 1px solid #ccc;
        background-color: #fff;
        .flex-y-center{
            display: flex;
            align-items: center;
        }
        .iconfot{
            font-size: 18px;
        }
        .icon-heart-fill, .icon-star-fill{
            color: #f71d3d;
        }
        .f-title{
            margin-left: 6px;
            font-size: 18px;
        }
    }
    .video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
::v-deep(.swiper-pagination-bullet-active){
    background-color: #fff!important;
}

</style>
